<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="vuex_table_title || '资讯'" ref="navbar"></fa-navbar>
		<view class="content">
			<view class="search">
				<u-search height="68" searchIconSize="44" :clearabled="true" bgColor="#ffffff" margin="34rpx 0" shape="round"
				placeholder="请输入关键词查找" :showAction="false" v-model="keyword" @search="searchKeyword" @clear="searchKeyword"></u-search>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in articleList" :key="index" @click="articleDetail(item)">
					<view class="left">
						<u-image width="200" radius="10" :src="item.cover" height="150"></u-image>
					</view>
					<view class="right">
						<view class="title">{{item.name}}</view>
						<view class="desc">{{item.intro || ''}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多 -->
		<view class="u-p-b-30" v-if="articleList.length">
			<u-loadmore bg-color="#f4f6f8" fontSize="28" :line="true" :status="has_more ? status : 'nomore'" />
		</view>
		<!-- 空数据 -->
		<view class="fa-empty" v-if="!articleList.length">
			<u-empty textSize="28" mode="data"></u-empty>
		</view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: lightColor }"></u-back-top>
		
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import { archives } from '@/common/fa.mixin.js';
	export default {
		mixins: [archives],
		data() {
			return {
				page:1,
				has_more: false,
				articleList:[],
				keyword:'',
				type:''
			};
		},
		onLoad(e) {
			this.getPolicyList();
		},
		
		
		onReachBottom() {
			if (this.has_more) {
				this.page += 1;
				if(this.type === 'policy'){
					this.getPolicyList();
				}
			}
		},
		methods:{
			getPolicyList(){
				this.$api.getPolicyList({params:{
					page:this.page,
					keyword:this.keyword
				}}).then((res)=>{
					if (res.code) {
						if (this.page === 1) {
							this.articleList = [];
						}
						let policyList = res.data.data
						let pageList = res.data
						this.has_more = pageList.current_page < pageList.last_page;
						this.articleList = [...this.articleList, ...policyList];
					}
				})
			},
			
			articleDetail(item) {
				if(item.type === 'outside'){
					uni.$u.vuex('vuex_webs', {
						title: item.name,
						url: item.linkurl
					});
					uni.$u.route({
						url: '/pages/webview/webview',
						
					})
					return
				}
				uni.$u.route({
					url: '/pages/jobs/detail',
					params: {
						article_id: item.id
					},
				})
				return
			},
			searchKeyword(){
				this.page = 1;
				this.getPolicyList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 188rpx 24rpx 280rpx;
	}
	.list{
		// padding: 32rpx 24rpx;
		.item{
			display: flex;
			// align-items: center;
			padding: 24rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-bottom: 24rpx;
			.left{
				margin-right: 24rpx;
			}
			.right{
				.title{
					font-size: 30rpx;
					color: #333333;
					font-weight: 600;
					margin-bottom: 18rpx;
					white-space: nowrap;       /* 防止文本换行 */
				    overflow: hidden;          /* 隐藏超出容器的文本 */
				    text-overflow: ellipsis;
					width: 430rpx;
				      
				}
				.desc{
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>
